<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-08 10:48:26
 * @Description  : 邮箱设置
-->
<template>
  <div class="email-settings">
    <div class="header flex items-center">
      <left-line></left-line>
      <div class="title text-[16px]">
        设置邮件服务器，用于用户注册，密码找回
      </div>
    </div>
    <n-divider class="!my-2" />
    <n-form
      ref="formRef"
      :label-width="200"
      :label-placement="menuShow ? 'left' : 'top'"
      label-align="left"
      :model="settings"
      size="small"
      require-mark-placement="left"
    >
      <n-form-item label="发送邮件：" path="emailType">
        <n-radio-group
          :value="settings.emailType"
          name="radiobuttongroup2"
          @update:value="
            (value: number) => handleChange('emailType', '' + value)
          "
        >
          <n-radio-button value="0" label="系统默认" />
          <n-radio-button value="1" label="自定义" />
        </n-radio-group>
        <div class="ml-[12px] text-gray-400 text-[12px]">
          系统默认：调用系统默认邮件服务器发送；自定义：自行配置邮件服务器
        </div>
      </n-form-item>

      <MyTransition>
        <div v-if="settings.emailType === '1'">
          <n-divider class="!my-2" />
          <n-form-item label="邮箱服务器：" path="emailServer">
            <n-input
              class="!w-[300px]"
              :value="settings.emailServer"
              @update:value="
                (value: string) => handleChange('emailServer', value)
              "
              placeholder="请输入邮箱服务器"
              :allow-input="noSideSpace"
              clearable
              :maxlength="50"
            />
            <div class="ml-[12px] text-gray-400 text-[12px]">
              邮箱服务器，如：smtp.163.com，可自定义端口（默认为465）
            </div>
          </n-form-item>
          <n-form-item label="发件邮箱：" path="emailAddr">
            <n-input
              class="!w-[300px]"
              :value="settings.emailAddr"
              @update:value="
                (value: string) => handleChange('emailAddr', value)
              "
              placeholder="请输入发件邮箱"
              :allow-input="noSideSpace"
              clearable
              :maxlength="50"
            />
            <div class="ml-[12px] text-gray-400 text-[12px]">
              系统发件邮箱地址，需开启POP3/SMTP服务
            </div>
          </n-form-item>
          <n-form-item label="加密方式：" path="emailEncrpyType">
            <n-radio-group
              :value="settings.emailEncrpyType"
              name="radiobuttongroup3"
              @update:value="
                (value: string | number) =>
                  handleChange('emailEncrpyType', '' + value)
              "
            >
              <n-radio-button value="0" label="无" />
              <n-radio-button value="SSL" label="SSL" />
              <n-radio-button value="TLS" label="TLS" />
            </n-radio-group>
          </n-form-item>
          <n-form-item path="emailAuthPwd" label="授权密码：">
            <n-input
              class="!w-[300px]"
              :value="settings.emailAuthPwd"
              placeholder="请输入邮箱授权密码"
              type="password"
              show-password-on="click"
              :maxlength="20"
              :allow-input="noSideSpace"
              @update:value="
                (value: string) => handleChange('emailAuthPwd', value)
              "
            >
            </n-input>
            <div class="ml-[12px] text-gray-400 text-[12px]">
              请确保邮件能正常发送
            </div>
          </n-form-item>
        </div>
      </MyTransition>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInst } from 'naive-ui'
import type { IndexObj } from '@/types/commom'
import { noSideSpace } from '@/utils'

defineProps<{
  settings: IndexObj
  menuShow: boolean
}>()

const emits = defineEmits<{
  (e: 'changeSettings', key: string, value: string): void
}>()

const formRef = ref<FormInst | null>(null)

const handleChange = (key: string, value: string) => {
  emits('changeSettings', key, value)
}
</script>

<style scoped lang="scss"></style>
